<template>
	<view class="proxy">
		<u-popup :show="show" @close="close" @open="open" zIndex="10070">
			<view class="proxy-box">
				<view class="tit">添加子账号</view>
				<view class="close flow-flex-start-center">
					<image src="@/static/icon/close.png" mode="" @click="show = false"></image>
				</view>
				<view class="proxy-form">
					<view class="proxy-form-lis" v-if="type == 'add'">
						<!-- <view class="name">手机号</view> -->
						<input type="number" maxlength="11" v-model="mobile" placeholder="请输入需要开的注册手机号" placeholder-class="placeholder-input">
					</view>
					<view class="proxy-form-lis">
						<!-- <view class="name">手机号</view> -->
						<input type="number" maxlength="50" v-model="name" placeholder="请输入子账号名称" placeholder-class="placeholder-input">
					</view>
					
					
					<view class="checkbox">
							<!-- 'create_receive' => '创建进货单', 'create_sales' => '创建销售单', 'view_receive' => '查看进货单', 'view_sales'=>'查看销售单', 'create_company' => '创建公司', 'view_company' => '查看公司', 'create_staff' => '创建操作人', 'view_staff' => '查看操作人', -->
						<u-checkbox-group v-model="checked" activeColor="#0E54A4"  @change="checkboxChange" placement="row">
							<u-checkbox label="创建进货单" name="create_receive"></u-checkbox>
							<u-checkbox label="创建销售单" name="create_sales"></u-checkbox>
							<u-checkbox label="查看进货单" name="view_receive"></u-checkbox>
							<u-checkbox label="查看销售单" name="view_sales"></u-checkbox>
							<u-checkbox label="创建公司" name="create_company"></u-checkbox>
							<u-checkbox label="公司列表" name="view_company"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="proxy-btn flow-center" @click="type == 'add' ?  addStaff() : editStaff() ">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import $validate from '@/common/validate.js';
	export default {
		data() {
			return {
				show:false,
				type:'add',
				id:'',//员工id
				mobile:'',
				name:'',
				checked:[],//权限选择
				captcha:''
			}
		},
		mounted(options) {
			
		},
		computed: {
			...mapState(['userInfo']), // vuex获取用户数据
		},
		methods: {
			checkboxChange(e){
				// console.log('checkboxChange',e)
			},
			// 编辑员工权限
			editStaff(){
				// if(!this.checked.length){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请选择权限'
				// 	})
				// 	return false;
				// }
				let power = this.checked.length >0 ? this.checked.join(',') : '';
				let parmas = {
					id: this.id,
					mobile: this.mobile,
					name:this.name,
					power: power,
				}
				this.$H.post('api/staff/save', parmas).then(res => {
					uni.showToast({
						title:'编辑成功'
					})
					setTimeout(()=>{
						this.$emit("resetList");//刷新列表
					},500)
					this.show = false
					this.id = ''
					this.name = ''
					this.checked = []
				});
			},
			// 添加员工权限
			addStaff(){
				if($validate.checkMobile(this.mobile)){
					uni.showToast({
						icon:'none',
						title:'手机号格式错误'
					})
					return false;
				}
				if(!this.checked.length){
					uni.showToast({
						icon:'none',
						title:'请选择权限'
					})
					return false;
				}
				let power = this.checked.join(',');
				let parmas = {
					mobile: this.mobile,
					name:this.name,
					power: power,
				}
				this.$H.post('api/staff/save', parmas).then(res => {
					uni.showToast({
						title:'添加成功'
					})
					setTimeout(()=>{
						this.$emit("resetList");//刷新列表
					},500)
					this.show = false
					this.mobile = ''
					this.name = ''
					this.checked = []
				});
			},
			open() {
			  this.show = true;
			},
			close() {
			  this.show = false
			},
			
			// 打开页面
			openPage(url){
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang="scss">
	.u-popup__content {
		background-color: transparent !important;
	}
	
</style>
<style lang="scss" scoped>
	
	.proxy-box{
		// height: 400rpx;
		// height: 608rpx;
		background: #F6F6F6;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 0 28rpx 50rpx;
		.close{
			padding: 50rpx 0 45rpx;
			justify-content: flex-end;
			position: relative;
			z-index: 8;
			image{
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.proxy-btn{
			width: 686rpx;
			height: 98rpx;
			background: #0E54A4;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			opacity: 1;
			margin: 20rpx auto 0;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;
			image{
				display:block;
				margin-right: 8rpx;
				width: 38rpx;
				height: 38rpx;
			}
		}
		.tit{
			padding: 43rpx 0 34rpx;
			position: absolute;
			text-align: center;
			width: 100%;
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #2D2929;
		}
		.proxy-form{
			.proxy-form-lis{
				height: 100rpx;
				padding: 0 28rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				opacity: 1;
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;
			}
			.name{
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				color: #2D2929;
				margin-right: 28rpx;
				min-width: 130rpx;
			}
			input{
				height: 100%;
				width: 100%;
				// width: 500rpx;
			}
		}
	}

</style>
